<!DOCTYPE html>
<html>
	<head>
		<title>Test Grid Column Resize</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=570" />
		<style type="text/css">
			@import "../../../dojo/resources/dojo.css";
			@import "../../css/skins/claro.css";
			.heading {
				font-weight: bold;
				padding-bottom: 0.25em;
			}
			#grid, #gridWide { 
				width: 750px;
			}
			#grid .field-col1 {
				width: 100px;
			}
			#grid .field-col2 {
				width: 100px;
			}
			#grid .field-col3 {
				width: auto;
			}
			#grid .field-col4 {
				width: 100px;
			}
			#grid .field-col5 {
				width: 150px;
			}
			
			#gridWide .field-col1,
			#gridWide .field-col2,
			#gridWide .field-col3,
			#gridWide .field-col4,
			#gridWide .field-col5 {
				width: 200px;
			}
			
			.ui-widget{
				margin: 10px;
			}
		</style>
		<script>
			var start= new Date().getTime();
		</script>
		<script type="text/javascript" src="../../../dojo/dojo.js" 
			data-dojo-config="async: true"></script>
		<script type="text/javascript">
			require(["dgrid/OnDemandGrid", "dgrid/extensions/ColumnResizer", "dgrid/Selection", "dojo/_base/declare", "dojo/_base/lang", "dgrid/test/data/base", "dojo/domReady!"],
				function(Grid, ColumnResizer, Selection, declare, lang, testStore){
					var columns = { // you can declare columns as an object hash (key translates to field)
						col1: 'Column 1Column1Column 1 Column 1',
						col2: {label: 'Column2222222222222222222222222', sortable: false},
						col3: 'Column3333333333333333333',
						col4: 'Column 4',
						col5: 'Column 5'
					};
					columns1 = lang.clone(columns);

					columns2 = { // you can declare columns as an object hash (key translates to field)
						col2: 'Col2',
						col4: {label: 'Col4', sortable: false},
						col1: 'Col1',
						col5: 'Column 5'
					};
					var ResizeGrid = declare([Grid, Selection, ColumnResizer]);
					window.grid = new ResizeGrid({
						store: testStore,
						columns: columns1
					}, "grid");
					window.gridWide = new ResizeGrid({
						store: testStore,
						columns: lang.clone(columns)
					}, "gridWide");
				});
		</script>
	</head>
	<body class="claro">
		<h2>A basic grid with column resizing</h2>
		<div id="grid"></div>
		<div>Buttons to test changing column structure:
			<button onclick="grid.set('columns', columns2);">New Structure</button>
			<button onclick="grid.set('columns', columns1);">Original</button>
		</div>
		<h2>Another grid w/ columns whose width initially exceed the table's width</h2>
		<div id="gridWide"></div>
	</body>
</html>
